<template>
    <div class="popup-frame">
        <div class="wraper">
            <van-popup v-model="show" position="bottom">
                <div class="body column">
                    <div class="header row">
                        <div>相关资料</div>
                        <div class="btn" @click="onClose">
                            <img
                                :src="require(`@/assets/icon/close_dark.png`)"
                            />
                        </div>
                    </div>

                    <div class="frame">
                        <iframe :src="src" frameborder="0"></iframe>
                    </div>
                </div>
            </van-popup>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            show: false,
            src: ""
        };
    },

    methods: {
        onClose() {
            this.show = false;
        },
        showPopup({ src }) {
            this.show = true;
            this.src = src;
        }
    }
};
</script>


<style lang="less" scoped>
.popup-frame {
    .wraper {
        .van-popup {
            border-radius: 10px;
        }
        .body {
            position: relative;
            z-index: 1000;
            box-sizing: border-box;
            padding-top: 90px;
            width: 100%;
            height: 1000px;
            align-items: center;
            justify-content: space-between;

            .content {
                padding: 40px 0;
                font-size: 32px;
            }

            .actions {
                color: #ffc031;
                padding: 30px 0;
                font-size: 30px;
                font-weight: 600;
            }

            .header {
                position: absolute;
                top: 0;
                background: #fff;
                z-index: 10001;
                width: 100%;
                height: 90px;
                align-items: center;
                justify-content: center;
                box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
                .btn {
                    position: absolute;
                    right: 30px;
                    width: 40px;
                }
            }

            .frame {
                width: 100%;
                height: 100%;

                iframe {
                    width: 100%;
                    height: 100%;
                }
            }
        }
    }
}
</style>